/*** custom start ***/
// --- global ---
@css-prefix   : "lg-";
@shadow-base  : 0 1px 6px rgba(0, 0, 0, .2);
@base-color   : #f6a000;
@font-color   : #515a6e;
@border-color : #dcdee2;
@border-type  : solid;
@border-width : 1px;
@border-radius: 5px;
@border       : @border-type @border-width @border-color;
// --- part  ---
@navigater-directory-w: 250px;

/*** custom end ***/
body,
html {
    margin : 0;
    padding: 0;
    height : 100%;
    color  : @font-color;
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
        Microsoft YaHei, SimSun, sans-serif;
    background-color: #eeeeee;

}

ul,
li {
    list-style-type: none;
    padding        : 0;
    margin         : 0;
}

a {
    text-decoration: none;
}

code {
    background-color: #fafafa;
    border-radius   : 4px;
    font-size       : .6em;
}

* {
    box-sizing: border-box;
}


// 主界面 start 

.home {
    height   : 100%;
    min-width: 800px;

    &-header,
    &-main,
    &-footer {
        background-color: #ffffff;
        box-shadow      : @shadow-base;
    }

    //头部
    &-header {
        position: fixed;
        height  : 65px;
        width   : 100%;
        top     : 0;
        left    : 0;
        z-index : 2;

        div:first-child {
            margin        : 0 25px;
            line-height   : 65px;
            vertical-align: middle;

            >div {
                display: inline-block;
            }
        }

        div.logo {
            height         : 45px;
            width          : 170px;
            background     : url(./imgs/logo.png) no-repeat;
            background-size: 100% 100%;
            display        : inline-block;
        }

        div.navs {
            float: right;

            @media (max-width: 550px) {
                visibility: hidden;
            }

            >ul {
                list-style-type: none;
                margin         : 0;
                padding        : 0;

                >li {
                    display: inline-block;
                    padding: 0 25px;

                    >a {
                        color         : @base-color;
                        opacity       : .5;
                        padding-bottom: 20px;

                        &:hover {
                            opacity      : 1;
                            border-bottom: solid 2px @base-color;
                        }
                    }
                }
            }
        }

        div.search {
            margin-left: 5%;

            @media (max-width: 850px) {
                visibility: hidden;
            }

            >input[type="text"] {
                border          : none;
                border-bottom   : solid 1px @base-color;
                padding-left    : 1.5em;
                font-size       : .8em;
                line-height     : 1.5;
                width           : 150%;
                border-radius   : 5px;
                background-color: transparent;

                &:focus {
                    outline: none;
                }
            }
        }
    }

    //主体
    &-main {
        overflow     : hidden;
        margin-top   : 80px;
        margin-bottom: 15px;
        position     : relative;

        &::after {
            content    : " ";
            position   : absolute;
            height     : 100%;
            border-left: @border;
            top        : 0;
            left       : 250px;
        }

        >div {
            margin-bottom : -9999px;
            padding-bottom: 9999px;
        }

        //左侧导航栏
        >div.navigaters {
            float        : left;
            width        : @navigater-directory-w;
            margin-left  : -100%;
            min-width    : 200px;
            padding      : 15px;
            padding-right: 0;

            li.navigater {

                >h3 {
                    margin: 5px 0;
                }

                >div.categories {

                    >h5 {
                        //title
                        padding-left: .5em;
                        color       : #999;
                        margin      : 5px 0;
                    }

                    >ul {
                        padding-left: 1em;

                        >li {
                            height      : 25px;
                            margin      : 10px;
                            margin-right: 0;


                            &:hover::after {
                                content         : "";
                                display         : block;
                                height          : 2px;
                                background-color: @base-color;
                            }

                            >a {
                                // link
                                color    : @font-color;
                                font-size: .9em;
                                display  : inline-block;
                                width    : 100%;
                            }

                            >a.router-link-active {
                                border-right    : solid 2px @base-color;
                                line-height     : 2;
                                color           : @base-color;
                                background-color: fade(@base-color, 5%);
                                ;

                            }
                        }
                    }
                }

            }
        }

        >div.container-wrapper {
            width: 100%;
            float: left;

            //主体内容
            >div.container {
                margin-left: @navigater-directory-w;
                border-left: @border;
                min-height : 1000px;
            }
        }
    }

    //尾部
    .home-footer {
        background-color: #212121;
        color           : #ffffff;


        div.footer-container {
            box-sizing: border-box;
            width     : 80%;
            min-height: 80px;
            padding   : 20px 0;
            margin    : 0 auto;

            >div.author {
                width     : 100%;
                text-align: center;
            }
        }
    }
}

// 主界面 end

// 展示基础view start

.show-wrap {
    display: inline;

    >div.content-wrap {
        float: left;
        width: 100%;

        >div.content {
            margin-right: 400px;
            padding     : 10px;
            padding-left: 20px;


            >div.lg-explain {
                margin-bottom: 40px;
            }

            @media (max-width: 1200px) {
                margin-right: 280px;

            }

            @media (max-width: 1000px) {
                margin-right: 0;
            }
        }

        >div.install-content {
            margin-right: 0;

        }
    }

    >div.directory {
        float      : left;
        width      : 400px;
        margin-left: -400px;

        @media (max-width: 1000px) {
            visibility: hidden;
            display   : none;

        }

        >div.divWrap {
            position: fixed;
            right   : 0;

            >.imgWrap {

                width           : 375px;
                height          : 680px;
                background-image: url("./imgs/iphone.png");
                background-size : 100% 100%;
                position        : relative;

                @media (max-width: 1200px) {
                    width : 275px;
                    height: 480px;

                }

                >img {
                    height  : 69%;
                    width   : 76%;
                    position: absolute;
                    top     : 0;
                    bottom  : 0;
                    left    : 0;
                    right   : 0;
                    margin  : auto;
                }
            }
        }


    }

}

//展示基础view end 

// explain start 
@explain-prefix: ~"@{css-prefix}explain";

.@{explain-prefix} {
    & {
        padding      : 5px;
        border       : @border;
        box-shadow   : @shadow-base;
        border-radius: @border-radius;
    }

    &-description {
        margin-top   : 20px;
        border-bottom: dashed 1px @border-color;

        &-content-wrap {
            border-top: @border;

            >span {
                position        : absolute;
                margin-top      : -.8em;
                margin-left     : 2em;
                background-color: white;
                outline         : solid 10px white;
                white-space     : nowrap;
            }
        }

        &-content {
            padding: 20px;
        }
    }

    &-code {

        pre,
        code {
            margin   : 0;
            padding  : 0;
            font-size: 1.2em;
        }
    }
}

// explain end

// table start 
@table-prefix: ~"@{css-prefix}table";

.@{table-prefix} {
    & {
        border-collapse: collapse;
        width          : 100%;
        text-align     : center;

        caption {
            text-align: left;
        }

        th,
        td {
            border : @border;
            padding: 5px;
        }

        th {
            color           : #999;
            background-color: #f7f7f7;
        }
    }
}

// table end 

// highlight start 
@highlight-prefix: ~"@{css-prefix}highlight";

.@{highlight-prefix} {
    & {
        padding         : 3px;
        margin          : 0 3px;
        color           : #fa795e;
        border-radius   : @border-radius;
        background-color: #fff5f5;


    }
}

// highlight end 

// fills star
@fills-prefix: ~"@{css-prefix}fills";

.@{fills-prefix} {
    & {
        padding: 2% 5%;
        display: inline-block;
        border-radius: @border-radius;
        border: @border;
        line-height: 1.2em;
    }
    &-color{
        color: white;
    }

}


// fills end

//speicfication start
@speicfication-prefix:~"speicfication";
.@{speicfication-prefix}{
    & .lg-fills {
        margin: 10px;
    }
}
//speicfication end
